<template>
	<view class="wanlpage-shop">
		<view class="store-box">
			<view class=" item-box" v-for="(shop,i) in data" :key="i">
				<view class="container top-box">
					<view class="left" @click="toStore(shop,null)">
						<image :src="$wanlshop.oss(shop.avatar,100,100)" mode="aspectFill"></image>
					</view>
					<view class="right" @click="onShop(shop.id)">
						
						<text class="tit" >{{shop.shopname}}（{{shop.description}}）</text>
						<view class="row justify-content">
							<view class="row-left">
								<i class="hxicon-favorfill "></i>
								<text class="t1">{{shop.city}}</text>
								<text class="t2">月售{{shop.verify}}</text>
							</view>
				<!-- 			<view class="row-right">
								<i class="hxicon-locationfill"></i>
								<text>{{shop.weigh}}</text>
							</view> -->
						</view>
						
					</view>
				</view>
				<scroll-view scroll-x="true"  class="bottom-box">
					<view class="bottom-box-container">
						<view class="goods-box" v-for="(goods,j) in shop.goods" :key="j" @click="onGoodscs(goods.id)">
							<view class="img-box">
								<image :src="$wanlshop.oss(goods.image,100,100)" mode="aspectFit"></image>
								<view class="tag">
									{{goods.tag}}
								</view>
							</view>
							<view class="tit">
								{{goods.title}}
							</view>
							<view class="price-box">
								<text class="txt1">￥</text>
								<text class="txt2">{{goods.price}}</text>
								<text class="txt3">￥{{goods.price}}</text>
							</view>
						</view>
					</view>
					
				</scroll-view>
			</view>
		</view>
		
		<view class="foot" v-if="showFoot">
			<text>更多商家加入中，敬请期待</text>
		</view>
		<view class="footzw"></view>
	</view>
</template>
<script>
	export default {
		name: "WanlPageShoplist",
		props: {
			pageData: {
				type: Object,
				default () {}
			}
		},
		data() {
			return {
				showFoot: false,
				data: []
			};
		},
		created() {
			this.loadData();
		},
		methods: {
			async loadData() {
				console.log(JSON.stringify(this.pageData.data));
				await uni.request({
					url: '/wanlshop/shop/getShopList',
					method: 'POST',
					data: this.pageData.data,
					success: res => {
						this.data = res.data;
					}
				});
			},

			onGoodscs(id){
				this.$wanlshop.msg('报歉，该产品为演示用！');
				return;
			},
			handleItem(url, id) {
				
				if(url){
					this.$wanlshop.to(url);
				}else{
					this.$wanlshop.msg('组件异常');
				}
			}
		}
	}
</script>
<style>
	.store-box{
		margin: 0 15px;
	}
	.store-box .item-box:first-child{
		margin-top: 10px;
	}
	.store-box .item-box{
		display: flex;
		flex-direction: column;
		margin-top: 30px;		
	}
	.store-box .item-box .top-box{
		display: flex;
		flex-direction: row;
	}
	.store-box .item-box .top-box .left{
		margin-right: 10px;
	}
	.store-box .item-box .top-box .left image{
		width: 72px;
		height: 72px;
		border-radius: 6px;
	}
	.store-box .item-box .top-box .right{
		flex: 1;
		margin-top: 15px;
		
	}
	.store-box .item-box .top-box .right .tit{
		font-size: 16px;
		font-weight: bold;
		color: #333333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.store-box .item-box .top-box .right .justify-content{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.store-box .item-box .top-box .right .row{
		font-size: 12px;
		color: #999999;
		margin-top: 4px;
	}
	.store-box .item-box .top-box .right .row .row-left{
		display: flex;
		flex-direction: row;		
	}
	.store-box .item-box .top-box .right .row .row-left .t1,i{
		color: #A5A5A7;
	}
	.store-box .item-box .top-box .right .row .t2{
		margin-left: 12px;
	}
	.store-box .item-box .top-box .right .row .row-right{
		display: flex;
		flex-direction: row;
		
	}
	.store-box .item-box .top-box .right .row .row-right i{
		margin-right: 4px;
	}
	.store-box .item-box .bottom-box{
		margin-top: -10px;
	}
	.store-box .item-box .bottom-box .bottom-box-container{
		margin: 8px 0 0;
		white-space: nowrap;
	}
	.store-box .item-box .bottom-box .bottom-box-container .goods-box{
		width: 48%;
		margin-right: 4%;
		display: inline-block;
		
	}
	.store-box .item-box .bottom-box .bottom-box-container .goods-box:last-child{		
		margin-right: 0;
	}
	.store-box .item-box .bottom-box .bottom-box-container .goods-box .img-box{
		position: relative;
		width: 100%;
		background-color: #f1f1f1;
		border-radius: 4px;
		
	}
	.store-box .item-box .bottom-box .bottom-box-container .goods-box .img-box image{
		width: 100%;
		height: 236rpx;	
	}
	.store-box .item-box .bottom-box .bottom-box-container .goods-box .img-box .tag{
		position: absolute;
		bottom: 0;
		left: 0;
		background-color: #FF5722;
		color: #ffffff;
		padding: 2px 4px;
		font-size: 12px;
		border-radius: 4px;
	}
	
	.store-box .item-box .bottom-box .bottom-box-container .goods-box .tit{
		font-size: 14px;
		margin-top: 4px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.store-box .item-box .bottom-box .bottom-box-container .goods-box .price-box .txt1{
		font-size: 10px;
		color: #FF5722;
	}
	.store-box .item-box .bottom-box .bottom-box-container .goods-box .price-box .txt2{
		font-size: 16px;
		color: #FF5722;
	}
	.store-box .item-box .bottom-box .bottom-box-container .goods-box .price-box .txt3{
		margin-left: 6px;
		font-size: 10px;
		color: #bbbbbb;
		text-decoration: line-through;
	}	
	
	.foot{
		position: relative;
		display: flex;
		justify-content: center;
		margin-top: 36px;
		margin-bottom: 50px;
	}
	.foot text{
			font-size: 14px;
			position: relative;
			z-index: 2;
			height: 20px;
			line-height: 20px;
			background-color: #f8f8f8;
			color: #cccccc;
			padding: 0 12px;
		}
	
	.wanlpage-shop {overflow: auto;margin-bottom: 80px;}
	.wanlpage-shop .bg{background-repeat: no-repeat; background-size: 100% auto;}
	.wanlpage-shop .cu-list { text-align: left; }
	.wanlpage-shop .cu-list>.cu-item { padding: 25rpx; overflow: hidden; }
	.wanlpage-shop .cu-list>.cu-item .cu-tag { left: 0; top: -4rpx; margin-left: 10rpx; }
	.wanlpage-shop .cu-list>.cu-item .cu-tag text {font-size: 20rpx;color: rgba(255, 255, 255, 0.5);}
	.wanlpage-shop .cu-list>.cu-item .cu-tag.sm { padding-left: 0; }
	.wanlpage-shop .cu-list>.cu-item .name .text-lg { font-size: 31rpx; }
	.wanlpage-shop .cu-list>.cu-item .goods { display: flex; justify-content: space-between; align-items: center;}
	.wanlpage-shop .cu-list>.cu-item .goods>image { height: 130rpx; background-color: #f9f9f9;}
	.wanlpage-shop .cu-list>.cu-item .goods>image + image { margin-left: 25rpx; }
</style>
